<template>
  <div class="projectSort">
    <!-- 项目导航菜单 -->
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      text-color="#fff"
      active-text-color="#409EFF"
      background-color="#324157"
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <router-link to="/home/projectSort/project">
        <el-menu-item index="1">项目</el-menu-item>
      </router-link>
      <router-link to="/home/projectSort/packages">
        <el-menu-item index="2">套餐</el-menu-item>
      </router-link>
      <router-link to="/home/projectSort/registration">
        <el-menu-item index="3">挂号费</el-menu-item>
      </router-link>
    </el-menu>

    <router-view></router-view>
  </div>
</template>

<script>
// 项目模块
import Project from './project'
// 套餐模块
import Packages from './packages'
// 挂号费模块
import Registration from './registration'
export default {
  name: "project_sort",
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  components:{
    Project,
    Packages,
    Registration
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.projectSort{
  width: 100%;
 
  .el-menu-demo{
     height: 60px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}
}
</style>
